<template>
  <el-select v-model="modelValue" placeholder="Select" :show-arrow="false" :offset="2" filterable :filter-method="filterMethod">
    <el-option v-for="item in options" :key="item.dictItemValue" :label="item.dictItemName" :value="item.dictItemValue" />
  </el-select>
</template>
<script setup lang="ts">
import { onBeforeMount, ref } from 'vue';
import { getDictItemList } from './api';
import type { IDictItem } from './interface';
defineOptions({
  name: 'DictSelector',
});
const props = defineProps({
  //字典编码
  dictCode: {
    type: String,
    required: true,
  },
  //是否多选
  multiple: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  //标签（用于过滤数据）
  tagIds: {
    type: Array,
    default: () => [],
  },
});
const dictCode = props.dictCode;
const modelValue = defineModel<string | undefined>();
const options = ref<IDictItem[]>([]);
onBeforeMount(async () => {
  const { data } = await getDictItemList(dictCode);
  options.value = data as unknown as IDictItem[];
});
const filterMethod = (keyword: string) => {
  console.log(keyword);
};
</script>
